{extend name="common/base" /}
{block name="body"} 
<main>

    <div class="container layui-row">
        <div class="layui-col-md3 layui-col-xs12 personal-nav">
            <div class="personal-user-name">
                <h1>Welcome Back,<br>{$user_info.first_name}</h1>
                <p class="white-font">{$user_info.email}</p>
            </div>

            <div class="personal-nav-item">
                <p class="white-font font-size-small">PURCHASE HISTORY</p>
                <div class="unselect-button">
                    <a href="/personal-info-all-purchases.html#block">
                        <span>View All Purchases</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>

                </div>
            </div>
            <div class="personal-nav-item">
                <p class="white-font font-size-small">PROFILE</p>
                <div class="unselect-button">
                    <a href="/personal-my-sizes.html#block">
                        <span>My Sizes</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-info.html#block">
                        <span>Personal Info</span>
                        <img src="__ROOT__/static/images/go-white.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-payments.html#block">
                        <span>Payments</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-address-and-delivery.html#block">
                        <span>Address and Delivery</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
            </div>
            <div class="personal-nav-item">
                <p class="white-font font-size-small">SECURITY AND COMMUNICATION</p>
                <div class="select-button">
                    <a href="/personal-change-password.html#block">
                        <span>Change Password</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-subsc-riptions.html#block">
                        <span>Subsc riptions</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>

                <div class="unselect-button margin-top-sign-out">
                    <a href="/login_out.html">
                        <span>Sign Out</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 layui-col-xs12 personal-genter change-password" id="block">
            <h1 class="personal-genter-title">Change Password</h1>
            <ul class="layui-row layui-col-space30">
                <li class="layui-col-md6 layui-col-xs12">
                    <label class="personal-label" for="unit number，street">Email verification</label>
                    <!-- <p class="personal-value">133333333@123.com</p> -->
                    <div class="input-style">
                        <input type="text" name="email" id="send_email"  value="{$user_info.email|default=''}"  placeholder="Please enter your Email">
                    </div>
                </li>
                <li class="layui-col-md6 layui-col-xs12 flex-end">
                    <button class="submit-button-personal" id="send_code_button" >
                        send
                    </button>
                </li>
                <li class="layui-col-md12 layui-col-xs12">
                    <label class="personal-label" for="New password">Code</label>
                    <div class="input-style">
                        <input class="password-input" name="email_code" id="email_code" type="text" value="" placeholder="Please Enter Code You receive">
                    </div>
                </li>

                <li class="layui-col-md12 layui-col-xs12">
                    <label class="personal-label" for="New password">New Password</label>
                    <div class="input-style">
                        <input class="password-input" name="password" id="password" type="text" value="" placeholder="Please Enter Your New Password">
                    </div>
                </li>

            </ul>
            <div class="layui-col-md12 layui-col-xs12  flex-end">

                <div  id="confirm_password" class="submit-button-personal">confirm</div>

            </div>
        </div>
    </div>
</main>
{/block}

{block name="js"} 
<script>
    $(function () {
        let countdown = 60; // 倒计时秒数
        let timer;

        // 发送验证码按钮点击事件
        $('#send_code_button').on('click', function () {

            const email = $('#send_email').val().trim();
            if (!email) {
                return layui.layer.msg('Email is required.', {icon: 2});
            }
            
            const button = $(this);
            button.prop('disabled', true).text(`Sending...`);

            const data = { email: email };
           
            ajaxRequest('/send_email', data, 'POST', this, function (response) {
                layui.layer.msg('Email sent successfully!', {icon: 1});
                startCountdown(button); // 启动倒计时
            }, function () {
                button.prop('disabled', false).text('Send');
            });
        });

          // 开始倒计时
          function startCountdown(button) {
            countdown = 60;
            button.text(`${countdown}s`);
            timer = setInterval(function () {
                countdown--;
                if (countdown > 0) {
                    button.text(`${countdown}s`);
                } else {
                    clearInterval(timer);
                    button.prop('disabled', false).text('Send');
                }
            }, 1000);
        }

  
        // Register button click event
        $('#confirm_password').on('click', function () {
            
            const email_code = $('#email_code').val().trim();
            const password = $('#password').val().trim();
            const email = $('#send_email').val().trim();
            if (!email_code) {
                return layui.layer.msg('Email code is required.', {icon: 2});
            }
            if (!password) {
                return layui.layer.msg('Password is required.', {icon: 2});
            }

            // Submit form
            const data = {
                email_code: email_code,
                password: password,
                email: email
            };

            ajaxRequest('/personal-change-password', data, 'POST', this, function (response) {
                layer.msg('Edit SUCCESS', {icon: 1, time: 2000}, function() {
                    // 弹窗消失后跳转
                    window.location.href = '/'; // 替换为目标页面的 URL
                });
            });
        });


      

    });
</script>
{/block}
